TypeScript Template Literal Parsing: Avanceret Manipulation af String-typer

            type Color = "red" | "green" | "blue";
type Shade = "light" | "dark";

type ColorCombination = `${Shade} ${Color}`;

// ColorCombination er nu "light red" | "light green" | "light blue" | "dark red" | "dark green" | "dark blue"

            

              
                Copy
              
            
          

            type Greeting = `Hello, ${string}!`;

// Eksempel på brug
const greet = (name: string): Greeting => `Hello, ${name}!`;

const message: Greeting = greet("World"); // Gyldig
const invalidMessage: Greeting = "Goodbye, World!"; // Fejl: Typen '"Goodbye, World!"' kan ikke tildeles til typen '`Hello, ${string}!`'.

            

              
                Copy
              
            
          

            type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type Endpoint = `/api/users` | `/api/products`;

type Route = `${HTTPMethod} ${Endpoint}`;

// Route er nu "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

            

              
                Copy
              
            
          

            type GetFileExtension = T extends `${string}.${infer Extension}` ? Extension : never;

// Eksempler
type Extension1 = GetFileExtension<"myFile.txt">; // "txt"
type Extension2 = GetFileExtension<"anotherFile.image.jpg">; // "image.jpg" (tager det sidste filtypenavn)
type Extension3 = GetFileExtension<"noExtension">; // never

            

              
                Copy
              
            
          

            type ParseConnectionString = 
  T extends `${infer Protocol}://${infer Host}:${infer Port}` ?
    { protocol: Protocol, host: Host, port: Port } : never;

// Eksempel
type Connection = ParseConnectionString<"http://localhost:3000">; 
// { protocol: "http", host: "localhost", port: "3000" }

type InvalidConnection = ParseConnectionString<"invalid-connection">; // never

            

              
                Copy
              
            
          

Denne type parser en connection string til dens protokol-, host- og port-komponenter.

Rekursive Typedefinitioner for Kompleks Parsing

For mere komplekse string-strukturer kan du bruge rekursive typedefinitioner. Dette giver dig mulighed for gentagne gange at parse dele af en string-type, indtil du når et ønsket resultat.

Lad os sige, du vil opdele en string i et array af individuelle tegn på typeniveau. Dette er betydeligt mere avanceret.

            type StringToArray = 
  T extends `${infer Char}${infer Rest}`
    ? StringToArray
    : Acc;

// Eksempel
type MyArray = StringToArray<"hello">; // ["h", "e", "l", "l", "o"]

            

              
                Copy
              
            
          

Forklaring:

• StringToArray<T extends string, Acc extends string[] = []>: Dette definerer en generisk type ved navn StringToArray, der tager en string-type T som input og en valgfri akkumulator Acc, der som standard er et tomt string-array. Akkumulatoren vil gemme tegnene, mens vi behandler dem.
• T extends `${infer Char}${infer Rest}`: Dette er den betingede type-tjek. Den tjekker, om input-strengen T kan opdeles i et første tegn Char og den resterende streng Rest. infer-nøgleordet bruges til at fange disse dele.
• StringToArray<Rest, [...Acc, Char]>: Hvis opdelingen lykkes, kalder vi rekursivt StringToArray med Rest af strengen og en ny akkumulator. Den nye akkumulator oprettes ved at sprede den eksisterende Acc og tilføje det aktuelle tegn Char til sidst. Dette tilføjer effektivt tegnet til det akkumulerende array.
• Acc: Hvis strengen er tom (den betingede type fejler, hvilket betyder, at der ikke er flere tegn), returnerer vi det akkumulerede array Acc.

Dette eksempel demonstrerer styrken ved rekursion i manipulation af string-typer. Hvert rekursivt kald fjerner ét tegn og tilføjer det til arrayet, indtil strengen er tom.

Arbejde med Afgrænsere

Template literals kan nemt bruges med afgrænsere til at parse strenge. Lad os sige, du vil udtrække ord adskilt af kommaer.

            type SplitString = 
  T extends `${infer First}${D}${infer Rest}`
    ? [First, ...SplitString]
    : [T];

// Eksempel
type Words = SplitString<"apple,banana,cherry", ",">; // ["apple", "banana", "cherry"]

            

              
                Copy
              
            
          

Denne type opdeler rekursivt strengen ved hver forekomst af afgrænseren D.

Praktiske Anvendelser

Disse avancerede teknikker til template literal parsing har adskillige praktiske anvendelser i TypeScript-projekter.

Datavalidering

Du kan validere string-baserede data mod specifikke mønstre på compile-time. For eksempel validering af e-mailadresser, telefonnumre eller kreditkortnumre. Denne tilgang giver tidlig feedback og reducerer runtime-fejl.

Her er et eksempel på validering af et forenklet e-mailadresseformat:

            type EmailFormat = `${string}@${string}.${string}`;

const validateEmail = (email: string): email is EmailFormat => {
  // I virkeligheden ville en meget mere kompleks regex blive brugt til korrekt e-mailvalidering.
  // Dette er kun til demonstrationsformål.
  return /.+@.+\..+/.test(email);
}

const validEmail: EmailFormat = "user@example.com"; // Gyldig
const invalidEmail: EmailFormat = "invalid-email"; // Typen 'string' kan ikke tildeles til typen '`${string}@${string}.${string}`'.

if(validateEmail(validEmail)) {
    console.log("Gyldig E-mail");
}

if(validateEmail("invalid-email")) {
  console.log("Dette vil ikke blive udskrevet.");
}

            

              
                Copy
              
            
          

Selvom runtime-validering med en regex stadig er nødvendig i tilfælde, hvor type-checkeren ikke fuldt ud kan håndhæve begrænsningen (f.eks. ved håndtering af eksternt input), giver EmailFormat-typen et værdifuldt første forsvar på compile-time.

Generering af API Endpoints

Template literals kan bruges til at generere API-endpoint-typer baseret på en base-URL og et sæt parametre. Dette kan hjælpe med at sikre konsistens og typesikkerhed, når man arbejder med API'er.

            type BaseURL = "https://api.example.com";
type Resource = "users" | "products";
type ID = string | number;

type GetEndpoint = `${BaseURL}/${T}/${U}`;

// Eksempler
type UserEndpoint = GetEndpoint<"users", 123>; // "https://api.example.com/users/123"
type ProductEndpoint = GetEndpoint<"products", "abc-456">; // "https://api.example.com/products/abc-456"

            

              
                Copy
              
            
          

Kodegenerering

I mere avancerede scenarier kan template literal-typer bruges som en del af kodegenereringsprocesser. For eksempel til at generere SQL-forespørgsler baseret på et skema eller til at oprette UI-komponenter baseret på en konfigurationsfil.

Internationalisering (i18n)

Template literals kan være værdifulde i i18n-scenarier. Overvej for eksempel et system, hvor oversættelsesnøgler følger en specifik navngivningskonvention:

            type SupportedLanguages = 'en' | 'es' | 'fr';
type TranslationKeyPrefix = 'common' | 'product' | 'checkout';

type TranslationKey = `${TPrefix}.${string}`;

// Eksempel på brug:
const getTranslation = (key: TranslationKey, lang: SupportedLanguages): string => {
  // Simulerer hentning af oversættelsen fra en ressourcepakke baseret på nøgle og sprog
  const translations: Record> = {
    'common.greeting': {
      en: 'Hello',
      es: 'Hola',
      fr: 'Bonjour',
    },
    'product.description': {
      en: 'A fantastic product!',
      es: '¡Un producto fantástico!',
      fr: 'Un produit fantastique !',
    },
  };

  const translation = translations[key]?.[lang];
  return translation || `Oversættelse ikke fundet for nøgle: ${key} på sprog: ${lang}`;
};

const englishGreeting = getTranslation('common.greeting', 'en'); // Hello
const spanishDescription = getTranslation('product.description', 'es'); // ¡Un producto fantástico!
const unknownTranslation = getTranslation('nonexistent.key' as TranslationKey, 'en'); // Oversættelse ikke fundet for nøgle: nonexistent.key på sprog: en

            

              
                Copy
              
            
          

TranslationKey-typen sikrer, at alle oversættelsesnøgler følger et konsistent format, hvilket forenkler processen med at administrere oversættelser og forhindre fejl.

Begrænsninger

Selvom template literal-typer er kraftfulde, har de også begrænsninger:

• Kompleksitet: Kompleks parsing-logik kan hurtigt blive svær at læse og vedligeholde.
• Ydeevne: Omfattende brug af template literal-typer kan påvirke compile-time ydeevnen, især i store projekter.
• Huller i typesikkerheden: Som demonstreret i e-mailvalideringseksemplet er compile-time-tjek nogle gange ikke nok. Runtime-validering er stadig nødvendig i tilfælde, hvor eksterne data skal overholde strenge formater.

Bedste Praksis

For at bruge template literal-typer effektivt, følg disse bedste praksisser:

• Hold det simpelt: Opdel kompleks parsing-logik i mindre, håndterbare typer.
• Dokumentér dine typer: Dokumentér tydeligt formålet med og brugen af dine template literal-typer.
• Test dine typer: Opret enhedstests for at sikre, at dine typer opfører sig som forventet.
• Balancer compile-time og runtime-validering: Brug template literal-typer til grundlæggende validering og runtime-tjek til mere komplekse scenarier.

Konklusion

TypeScript template literal-typer giver en kraftfuld og fleksibel måde at manipulere string-typer på compile-time. Ved at kombinere template literals med betingede typer og type-inferens kan du skabe sofistikeret logik på typeniveau til at parse, validere og transformere string-baserede data. Selvom der er begrænsninger at overveje, kan fordelene ved at bruge template literal-typer med hensyn til typesikkerhed og vedligeholdelse af kode være betydelige.

Ved at mestre disse avancerede teknikker kan udviklere skabe mere robuste og pålidelige TypeScript-applikationer.

Yderligere Udforskning

For at uddybe din forståelse af template literal-typer, kan du overveje at udforske følgende emner:

• Mapped Types: Lær hvordan man transformerer objekttyper baseret på template literal-typer.
• Utility Types: Udforsk indbyggede TypeScript utility-typer, der kan bruges sammen med template literal-typer.
• Avancerede Betingede Typer: Dyk dybere ned i mulighederne med betingede typer for mere kompleks logik på typeniveau.